<template>
    <div class="Management">
      <header>
        <p><router-link to="/Setting"><img src="../../static/img/transfer/contact_06.jpg">返回</router-link></p>
        <p>账户管理</p>
        <img src="../../static/img/manage_03.jpg" alt="">
      </header>
      <p class="man-p-1">支付宝账户</p>
      <p class="man-p-2">
        <img src="../../static/img/manage_07.jpg" alt=""/>
        <span>152****9527</span>
        <img src="../../static/img/manage_09.jpg" alt=""/>
      </p>
      <p class="man-p-3">
        <span>换个账户登录</span>
        <img src="../../static/img/setting_03.jpg"  alt=""/>
      </p>
    </div>
</template>

<script>
    export default {
        name: "Management"
    }
</script>

<style scoped>
  header{
    display: flex;
    font-size: 1.2rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: .6rem;
    justify-content: space-between;
    padding: .8rem;
    align-items: center;
  }
  header>img{
    width: 1.8rem;
  }
  header p:nth-child(2){
    font-weight: bold;
    margin-right: .7rem;
  }
  header p:nth-child(1) a, header p:nth-child(3) a{
    font-size: 1rem;
    color: #108ee9;
    display: block;
  }
  header p:nth-child(1) a img{
    width: .8rem;
    height: 1.2rem;
    margin-right: .3rem;
  }
  .man-p-1{
    padding: .5rem;
    font-size: .9rem;
    color: #a1a1a1;
    border-bottom: 1px solid #ddd;
  }
  .man-p-2{
    display: flex;
    padding:.5rem .7rem ;
    align-items: center;
    background: white;
    border-bottom: 1px solid #ddd;
    margin-bottom: .9rem;
  }
  .man-p-2 img:first-of-type{
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
  }
  .man-p-2 img:last-of-type{
    width: 1.9rem;
    height: 1.5rem;
    margin-left: 12rem;
  }
  .man-p-3{
    background: white;
    display: flex;
    justify-content: space-between;
    padding: .7rem;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    font-size: 1rem;
  }
  .man-p-3 img{
    width: .8rem;
    height: 1.2rem;
  }
</style>
